<template>
    <div>
        <keep-alive>
            <component v-bind:is="currentView"></component>
        </keep-alive>
        <button @click="changeCmp">切换组件</button>

        <!-- 用v-if实现 -->
        <demo-child v-if="currentView === 'DemoChild'"/>
        <demo-child2 v-else />
        <button @click="changeCmp">切换组件</button>
    </div>
</template>

<script>
import DemoChild from './Demo5-Child'
import DemoChild2 from './Demo5-Child2'
export default {
    data() {
        return {
            currentView: 'DemoChild'
        }
    },
    components: {
        DemoChild, DemoChild2
    },
    methods: {
        changeCmp() {
            this.currentView = 'DemoChild2'
        }
    }
}
</script>